<div id="page-title">
  <div id="page-title-inner">
    <!-- start: Container -->
    <div class="container">
      <h2>
        <i class="fa fa-search" aria-hidden="true"></i> Search the surveys on your need</h2>
    </div>
    <!-- end: Container  -->
  </div>
</div>
<div id="wrapper">
  <div class="container">


    <div class="row">

      <div class="col-8">
        <label class="sr-only" for="inlineFormInput">Keyword</label>
        <input (change)="search($event)" type="text" class="form-control mb-2 mr-sm-2 mb-sm-0" id="inlineFormInput" placeholder="Keyword">
      </div>
      <div class="col-2">
        <select class="form-control custom-select" (change)="updateSortBy($event)">
          <option value="" selected>Sort By</option>
          <option value="visitCount">Visit Count</option>
          <option value="doneCount">Done Count</option>
          <option value="createdAt">Create Date</option>
        </select>
      </div>
      <div class="col-2">
        <select class="form-control custom-select" (change)="updateDirection($event)">
          <option value="" selected>Direction</option>
          <option value="asc">ASC</option>
          <option value="desc">DESC</option>
        </select>
      </div>

    </div>

    <hr>

    <survey-summary-list [summaryList]='resultSurveys'>Loading...</survey-summary-list>

    <div class="row">
      <span class="collapse" *ngFor="let summary of resultSurveys | paginate: { id: 'listPage',
        itemsPerPage: 12,
        currentPage: currentPage,
        totalItems: itemCount }">
      </span>
    </div>
    <div class="row">
      <pagination-controls class="survey-pagination" id="listPage" (pageChange)="updatePage($event)"></pagination-controls>
    </div>

  </div>